<template>
  <div class="login">
    <div class="container">
      <div class="login-wrapper">
        <div class="login-header">SilverSky</div>
        <div class="form-wrapper">
          <el-form :model="loginForm">
            <el-form-item>
              <input type="text" name="userInfo" placeholder="手机号/邮箱" class="input-item" v-model="loginForm.userInfo">
            </el-form-item>
           <el-form-item>
             <input type="password" name="password" placeholder="密码" class="input-item" v-model="loginForm.password">
           </el-form-item>
          </el-form>
          <div class="btn" @click="login()">登录</div>
        </div>
        <div class="msg">
          没有账号?
          <a href="/reg">立即注册!</a>
        </div>
      </div>
    </div>
  </div>
</template>

<style>
@import '../../public/css/login.css';
.login {
  background: url("~../../public/background.png") no-repeat center;
  background-size: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
</style>

<script>
import axios from "axios";

export default {
  data(){
    return{
      loginForm:{
        userInfo:'',
        password:''
      }
    }
  },
  methods:{
    login(){
      let url = "http://localhost:8080/admins/login";
      let data = {
        "userInfo" : this.loginForm.userInfo,
        "password" : this.loginForm.password
      }
      console.log(data)
      axios.post(url,data).then((response) => {
        if (response.data.state === 2000){
          this.$message({
            message: '登录成功!',
            type: 'success'
          })
          location.href="/admin"
        }else {
          this.$message.error({
            message: response.data.message,
          })
          this.loginForm.password = ''
        }
      })
    }
  }
}
</script>